<template>
  <div>
    <button @click="getStudents">获取学生信息</button>
    <button @click="getCars">获取汽车信息</button>
    <div>
      <h1>学生数据</h1>
      {{ students }}
    </div>
    <div>
      <h1>汽车数据</h1>
      {{ cars }}
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import Vue from 'vue';
export default Vue.extend({
  name: "App",
  data() {
    return {
      students: [],
      cars: []
    }
  },
  methods: {
    getStudents() {
      /* 
          配置了代理，这里就填前端的地址，因为前端现在8080相当于有个代理服务器，它帮我们转发到5000端口（vue.config.js里）
      */
      axios.get('http://localhost:8080/atguigu/students')
        .then(
          response => {
            console.log('请求成功', response.data);
            this.students = response.data
          },
          error => {
            console.log("请求失败", error.message);
          }
        )
    },
    getCars() {
      axios.get('http://localhost:8080/demo/cars')
        .then(
          response => {
            console.log('请求成功', response.data);
            this.cars = response.data
          },
          error => {
            console.log("请求失败", error.message);
          }
        )
    },
  },
})
</script>